<template>
  <div>
    <p>分类页</p>
    <ul>
      <li v-for="item in grilStar" :key="item">{{ item }}</li>
    </ul>
    <p><button @click="addGirl">新增女明星</button></p>
    <hr />
    <ul>
      <li v-for="item in manStar" :key="item">{{ item }}</li>
    </ul>
    <p><button @click="addMan">新增男明星</button></p>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  name: "",
  props: [""],
  data() {
    return {};
  },
  setup() {
    // 01: setup 的执行时间 比 beforeCreate 更早 ,在vue3 中,也把他作为一个生命周期函数了,替换 breforeCreate 和 created 的生命周期函数
    // console.log("setup");

    // 02:reactive 专门用来将复杂数据类型进行响应式处理函数,不能处理基本数据类型,否则报错,实现响应式的原理使用了 proxy 代理,实现数据的监听
    // 03:ref 虽然即可以处理基本数据类型还可以处理复杂数据类型,但是处理复杂数据类型借助了reactive 返回的 proxy 代理实现的数据监听

    let grilStar = ref(["娜扎", "刘诗诗", "高圆圆"]);
    // console.log(grilStar.value);
    const addGirl = () => {
      grilStar.value.push("张曼玉");
    };

    let manStar = reactive(["黄宗泽", "安志杰", "古天乐"]);
    // console.log(manStar);
    const addMan = () => {
      manStar.push("张国荣");
    };

    return {
      grilStar,
      addGirl,
      manStar,
      addMan,
    };
  },
  //   beforeCreate() {
  //     console.log("beforeCreate");
  //   },
  //   created() {
  //     console.log("created");
  //   },
  //   mounted() {
  //     console.log("mounted");
  //   },
};
</script>
<style scoped>
</style>